<%@ page language="java" contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jspf/taglibs.jspf"%>
<%@ page trimDirectiveWhitespaces="true" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>表单管理</title>
<script src="/js/angular-1.0.1.min.js"></script>
    <script type="text/javascript">
        localPath="form"
    </script>
</head>
<body >

<form  id="addFormsForm"  action="/forms/add"  method="POST"  ng-app>
<div class="p-h-md p-v bg-white box-shadow pos-rlt ng-scope">
  <div class="pull-right">
    <button type="submit" class="btn btn-sm btn-primary" ui-sref="app.lp">提交</button>
    <a class="btn btn-sm btn-default" href="javascript:history.go(-1);">取消</a>
  </div>
  <h3 class="no-margin">新建营销表单</h3>
</div>
<div class="p-md ng-scope">
<div class="clear">
<div class="col-sm-6">
<div class="list-group">
  <h5 class="no-margin m-b">页面自定义</h5>
<div class="panel panel-info">
      <div class="panel-heading">自定义选项</div>
      <div class="panel-body">
        <div class="form-group">
        <label>主标题</label>
        <input ng-model="mainTitle" ng-init="mainTitle='${diyForm.mainTitle }'"  type="text"  name="mainTitle" class="form-control w-xxl w-full-xs" placeholder="这里是主标题" value="${diyForm.mainTitle }" >
      <span class="must">(*必填)</span>
      </div>
        <div class="form-group">
        <label>副标题</label>
        <input ng-model="subTitle"  ng-init="subTitle='${diyForm.subTitle }'"  type="text" name="subTitle" class="form-control w-xxl w-full-xs" placeholder="这里是副标题" value="${diyForm.subTitle }" >
      <span class="must">(*必填)</span>
      </div>
        <div class="form-group">
        <label>图片1</label>
        <div class="form-file">
          <input id="imageOne"  type="file" name="file">
          <input id="imageOnePath" type="hidden" name="imagePath1" value="${diyForm.imagePath1 }"  />
 		  	<input id="imageOneId"  type="hidden" name="imageId1" value="${diyForm.imageId1 }"/>
        </div>
<small class="text-muted"> 图片大小小于1M 图片格式:*.jpeg;*.jpg;*.png</small>
      </div><span class="must">(*必填)</span>
        <div class="form-group">
        <label>文字内容1</label>
        <textarea ng-model="content1"  ng-init="content1='${diyForm.content1 }'"  name="content1" class="form-control w-xxl w-full-xs" placeholder="这里是文字内容1" >${diyForm.content1}</textarea>
      </div>
        <div class="form-group">
        <label>图片2</label>
        <div class="form-file">
          <input id="imageTwo" type="file">
          <input id="imageTwoPath" type="hidden" name="imagePath2" value="${diyForm.imagePath2 }" />
 		  <input id="imageTwoId" type="hidden" name="imageId2" value="${diyForm.imageId2 }"/>
        </div>
<small class="text-muted">图片大小小于1M 图片格式:*.jpeg;*.jpg;*.png</small>
      </div>
        <div class="form-group">
        <label>文字内容2</label>
        <textarea ng-model="content2"  ng-init="content2='${diyForm.content2 }'"  name="content2" class="form-control w-xxl w-full-xs" placeholder="这里是文字内容2" >${diyForm.content2}</textarea>
      </div>
      <div class="form-group">
        <label>图片3</label>
        <div class="form-file">
          <input id="imageThree"  type="file" >
            <input id="imageThreePath" type="hidden" name="imagePath3" value="${diyForm.imagePath3 }" />
 		  <input id="imageThreeId" type="hidden" name="imageId3" value="${diyForm.imageId3 }"/>
        </div>
<small class="text-muted">图片大小小于1M 图片格式:*.jpeg;*.jpg;*.png</small>
      </div>
        <div class="form-group">
        <label>文字内容3</label>
        <textarea rows="10"  ng-model="content3"  ng-init="content3='${diyForm.content3 }'"  name="content3" class="form-control w-xxl w-full-xs" placeholder="这里是文字内容3" >${diyForm.content3}</textarea>
<span class="must">(*必填)</span>
      </div>
      </div>
    </div>
      </div>
    </div>
    
 <div class="col-md-6">
<h5 class="no-margin m-b">页面预览</h5>
  <div class="formShow">
  <h1>{{mainTitle ||'这里是主标题' }}</h1>
  <h2>{{subTitle ||'这里是副标题' }}</h2>
  <div class="shpwPicBox">
 		 	<img id="imageOneShow"  style="display:none">
  </div>
  <div class="textNor">
  <pre>{{content1 ||'这里是文字内容一' }}</pre>
  </div>
  <div class="shpwPicBox h750">
 		   <img id="imageTwoShow"  style="display:none">
  </div>
  <div class="textNor">
  <pre>{{content2 ||'这里是文字内容二' }}</pre>
  </div>
  <div class="shpwPicBox">
 		   <img id="imageThreeShow"  style="display:none">
  </div>
  <div class="textNor">
  <pre>{{content3 ||'这里是文字内容三' }}</pre>
  </div>
      <div class="panel-body">
          <div class="form-group">
              <label>您的姓名</label>
              <input type="text" class="form-control">
          </div>
          <div class="form-group">
              <label>您的手机</label>
              <input type="text" class="form-control">
          </div>
          <div class="form-group">
              <label>您的微信号</label>
              <input type="text" class="form-control">
          </div>
          <div class="form-group">
              <label>您的婚期</label>
              <input type="text" class="form-control">
          </div>
      </div>
  </div>
 </div>
 
 
 </div>
      <div class="text-center p-md">
        <label type="submit" id="addForms" class="btn btn-primary" ui-sref="app.lp">提交</label>
      </div>
</div>


</form>
	<script type="text/javascript"  src="/js/plugins/uploader/jquery.uploadify.js"></script>
	<script type="text/javascript"  src="/js/plugins/uploader/laddingPageImage.js"></script>
	<script type="text/javascript">
	$().ready(function(){
		$("#addFormsForm").validate({
			 ignore: [],
	     	rules: {
	     		mainTitle:{required:true},
	     		subTitle:{required:true},
	     		imageId1:{required:true},
// 	     		imageId2:{required:true},
// 	     		imageId3:{required:true},
// 	     		content1:{required:true},
// 	     		content2:{required:true},
	     		content3:{required:true},
// 	     		imagePath1:{required:true}
	   },
	       messages: {
	    	   mainTitle:{required:"请填写主标题"},
	    	   subTitle:{required:"请填写副标题"},
	    	   imageId1:{required:"请上传图片"},
// 	    	   imageId2:{required:"请上传图片"},
// 	    	   imageId3:{required:"请上传图片"},
// 	    	   content1:{required:"请输入内容"},
// 	     		content2:{required:"请输入内容"},
	     		content3:{required:"请输入内容"},
// 	     		imagePath1:{required:"请上传图片一"}
	       },
	   	//用什么标签标记错误，默认是 label，可以改成 em。
		/* 	errorElement:"label",
		// 	 errorContainer: "#messageBox1, #messageBox2",	
			//用什么标签再把上边的 errorELement 包起来。
// 		wrapper:"div",
		//把错误信息统一放在一个容器里面。
		errorLabelContainer: $("#signupForm div.error"),
		  /*写该验证消息显示的位置
	     errorPlacement : function(error, element) {  
		    error.appendTo(element.parent());  
		}  */
	   });
		$("#addForms").click(function(){
			if($("#imageOneId").val()==""||$("#imageOneId").val()==null){
				alert("请上传图片一")
				return
			}
			$("#addFormsForm").submit();
		});
	});
	
	</script>

</body>
</html>